<template>
  <el-dialog
    v-el-drag-dialog
    class="viewportDialog"
    :title="$t('节目视图')"
    :visible="visible"
    width="880px"
    @update:visible="updateVisible"
    append-to-body>
    <div class="show-box">
      <!-- 视图区 -->
      <div class="left">
        <div class="wrap-time-view">
          <time-view
            :y-axis="null"
            :list="timeViewList"
            :step="1"
            :total-time="86400000 * 2"></time-view>
        </div>
        
      </div>
      <!-- 属性区 -->
      <div class="right">
        <div class="info-row attr-title">
          {{ $t('属性') }}
        </div>
        <div class="element-name">
          {{ $t('列表') }}
        </div>
        <div class="list-area">
          <list
            height="556px"
            row-key="_id"
            :list-data="listData"
            :list-cols="listCols"
            :action-opts="actionOpts">

          </list>
        </div>
      </div>
    </div>

  </el-dialog>
</template>

<script>
import List from '@/components/List'
import TimeView from '../../media-pubshow/components/TimeView'

export default {
  components: {
    List,
    TimeView
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    timeViewList: {
      type: Array,
      default() {
        return []
      }
    },
    listData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      listCols: [{
        label: '开始时间',
        prop: 'startDate',
        minwidth: 158
      }, {
        label: '结束时间',
        prop: 'endDate'
      }, {
        label: '媒体',
        prop: 'fileName'
      }],
      actionOpts: { show: false }
    }
  },
  computed: {
  },
  methods: {
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    okClick(v) {
      this.fetching = true
      if (this.opType === '1') {
        this.$emit('addClick', this.self_form, this.fetchingEndCb)
      } else if (this.opType === '2') {
        this.$emit('updateClick', this.self_form, this.fetchingEndCb)
      } else {
        this.updateVisible(false)
      }
    },
    preClick() {

    },
    fetchingEndCb() {
      this.fetching = false
      this.updateVisible(false)
    },
    cancelClick() {
      this.updateVisible(false)
    }
  }
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';

  $info-row-h: 57px;
  $border-style: 1px solid $bg-e9;

  .viewportDialog {
    ::v-deep .el-dialog__body {
      padding: 0 !important;
    }

    ::v-deep .el-dialog__header {
      border-bottom: $border-style;
    }
  }

  .show-box {
    display: flex;
    align-items: stretch;

    .left {
      height: 670px;
      flex: 1;
      padding: 0 20px;
      
      .wrap-time-view  {
        height: 100%;
        width: calc(800px - 240px);
      }
    }

    .right {
      overflow: hidden;
      flex-basis: 280px;
      border-left: $border-style;

      .attr-title {
        background: $bg-f9;
        border-bottom: $border-style;
        padding-left: 20px;
        line-height: 48px;
        font-size: $font-size-16;
        color: $bg-33;
      }

      .element-name {
        font-size: $font-size-14;
        color: $bg-33;
        padding-left: 20px;
        height: 44px;
        line-height: 44px;
        border-bottom: $border-style;
      }

      .list-area {
        padding: 20px;
      }

    }
  }
</style>